<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
*{
	margin:0px;
	padding:0px;
	}
body{font-family:"微软雅黑";}
a{
	text-decoration:none;
	color:#5C5C5C;
	}
#head{
	width:100%;
	height:53px;
	border-bottom:4px #0066cb solid;
	}
#head .top{
	width:990px;
	margin:auto;
	}
#head .logo{
	width:210px;
	float:left;
	}
#head h1{
	padding-top:13px;
	float:left;
	}
#head .logo span{
	width:1px;
	height:25px;
	background:#747474;
	float:left;
	margin-top:16px;
	margin-left:4px;
	}
#head .logo p{
	float:right;
	font-size:18px;
	margin-top:18px;
	margin-right:10px;
	}
.top_right{
	float:right;
	margin-top:20px;
	margin-right:20px;
	}
#content{
	width:990px;
	height:450px;
	margin:auto;
	padding-top:50px;
	}
.content_top{
	width:990px;
	height:80px;
}
.content_top p{
	margin-top:8px;
	}
.content_top .left{
	width:460px;
	float:left;
	background:url(images/huigxian.png) no-repeat 78px 22PX;
	} 
.content_top .left img{
	margin-left:20px;
	}
.content_top .left p{
	margin-left:10px;
	}
.content_top .center{
	float:left;
	width:460px;
	background:url(images/huigxian.png) no-repeat 78px 22PX;
	} 
.content_top .right{
	float:right;
	}
.content_top .center img{
	margin-left:15px;} 
.content_top .right p{
	margin-left:6px;
	}
.content_top .right img{
	margin-right:10px;
	}
.crucial{
	width:280px;
	height:130px;
	margin:auto;
	margin-top:80px;
	padding-top:10px;
	}
#crucial p{
	float:left;
	font-size:16px;
	}
#crucial input{
	float:right;
	}
#crucial a{
	width:100px;
	height:22px;
	background:#207CD7;
	line-height:22px;
	text-align:center;
	float:left;

	}	
.crucial .Email_text{
	width:212px;
	height:22px;
	}
.crucial .Email p{
	margin-left:16px;}
.crucial .Email{
	margin-bottom:40px;
	}
.crucial .verify_text{
	width:124px;
	height:22px;
	float:left;
	}
.crucial .verify span{
	width:80px;
	height:22px;
	float:right;
	margin-right:5px;
	background:#ccc;
	}
.crucial02{
	width:280px;
	height:130px;
	margin:auto;
	padding-top:10px;
	margin-top:80px;
	}
.crucial02 .NewPassword_text{
	width:190px;
	height:22px;
	} 
.crucial03{
	width:280px;
	height:130px;
	margin:auto;
	padding-top:10px;
	margin-top:80px;
	}
.crucial02 a{}
</style>
<body>
<div id="head">
  <div class="top">
        	<div class="logo">
            	<h1><img src="images/LOGO.gif" width="117" height="32" /></h1>
                <span></span>
                <p>重置密码</p>
      		</div>
            <div class="top_right" style="color:#5C5C5C;">
            <a style="color:#0066cb;" href="#">登陆</a> | <a href="#">返回首页</a>
            </div>
 	 </div>
</div>
<div id="content">
	<div class="content_top">
    	<div class="left">
        	<img src="images/lan1.png" width="47" height="48" />
            <p style="color:#1172D1;">验证身份</p>
            <span class="span1"></span>
        </div>
        <div class="center">
      		<img id="img2" src="images/huig2.png" width="47" height="48" />
            <p>输入新密码</p>
            <span  class="span2"></span>
        </div>
   	    <div class="right">
        	<img id="img3" src="images/huiggou.png" width="47" height="48" /><p>完成</p>
        </div>
  </div>
 <div id="crucial">
  <div class="crucial">
  		<div class="Email">
        	<p>邮箱：</p>
            <input class="Email_text" type="text"/>
        </div>
        <div class="verify">
        	<p>验证码：</p>
            <input style="float:left;" class="verify_text" type="text"/>
            <span></span>
        </div>
        <a style="color:#FFF;margin:15px 0 0 64px;" class="next" href="javascript:void(0)">下一步</a>
        <a style="background:#E7E7E7;margin:-22px 5px 0 60px; float:right;" class="reset" href="javascript:void(0)">重置</a>
  </div>
  <div class="crucial02">
  		<div class="NewPassword">
  			<p style="margin-left:16px;">新密码：</p>
            <input class="NewPassword_text"  type="text"/>
        </div>
        <div class="ConfirmPassword" style=" margin-top:40px;">
        	<p>确认密码：</p>
            <input style="width:190px; height:22px;" class="ConfirmPassword_text"  type="text"/>
        </div>
	    <a style="background:#E7E7E7;margin:15px 0 0 85px; width:90px;" href="javascript:void(0)" id="previous2"  >上一步</a>
	    <a style="color:#FFF;margin:15px 5px 0 10px; width:90px; float:right;" href="javascript:void(0);" id="next2" >下一步</a>
  </div>
  <div class="crucial03">
  	<span>恭喜你，您的密码已经修改成功！</span>
    
  </div>
  </div>
</div>
</body>
</html>
<script>
	$(function(){
		$(".crucial02,.crucial03").hide();

		//第一步上的下一步按钮被点击的事件
		$(".next").click(function(){
			$(".crucial").hide();
			$(".center p").css("color","#1172D1")
			$(".left").css("background-image","url(images/lanxian.png)");
			$("#img2").attr("src","images/lan2.png");
			$(".crucial02").show();
		})
		//第一步上的重置按钮被点击的事件
		$(".reset").click(function(){
			$(".text01,.text02").val("");
		})

		//第二步上的下一步按钮被点击的事件
		$("#next2").click(function(){
			$(".center").css("background-image","url(images/lanxian.png)");
			$("#img3").attr("src","images/langou.png");
			$(".right p").css("color","#1172D1");
			$(".crucial02").hide();
			$(".crucial03").show();
		});

		//第二步上的上一步按钮被点击的事件
		$("#previous2").click(function(){
			$(".left").css("background-image","url(/images/huixian.png)");
			$("#img2").attr("src","/images/huig2.png");
			$(".center p").css("color","#000000");
			$(".crucial02").hide();
			$(".crucial").show();
		})

		//第三步上的上一步按钮被点击的事件
		$("#previous3").click(function(){
			$(".center").css("background-image","url(images/huixian.png)");
			$("#img3").attr("src","images/huiggou.png");
			$(".crucial03").hide();
			$(".crucial02").show();
		});


	})
</script>
